Catálogo de recursos ivanlabs

Definición, concepto clave o aviso aislado («Importante»). Para resaltar una idea suelta.

3+ puntos relacionados que conviene plegar: glosario, FAQs, partes de una interfaz.

Una secuencia: cronología, pasos, lista de «lo que aprenderás». Tarjetas horizontales con flechas.

2-4 datos breves que se voltean: delante el título o icono, detrás la explicación.

Comparar 2-3 alternativas u opciones lado a lado.

Conjunto de imágenes con pie de foto, navegables.

Capturas con pie de foto que se amplían a pantalla completa al hacer clic (lightbox accesible), sueltas o en carrusel. Ideal para enseñar interfaces paso a paso.

Narración o pista de audio asociada a un tema.

El alumnado se lleva un documento de trabajo (plantilla Word, PDF) desde el propio curso. Convierte una píldora en algo que deja poso. OJO: el fichero debe colgar de assets/ o el empaquetador lo excluye y da 404 en el LMS.

Cierra un módulo con 2-4 fuentes externas de calidad para quien quiera seguir. Son enlaces, no iframes: no rompen el paquete offline. Verificar cada enlace al maquetar.

Dos columnas para romper el muro de texto: contenido a la izquierda, ilustración a la derecha (con --invertido para alternar). La imagen sale del banco visual y es decorativa (alt=""). Un esquema con información NO va aquí: se construye en HTML/CSS. Máximo 2-3 por unidad.

Un icono 3D que el alumno gira 360° arrastrando (ratón, dedo o flechas), con inercia. No es un modelo 3D real: son fotogramas pre-renderizados con el MCP icono3d en modo --turntable, con encuadre compartido para que no salte. 0 librerías, offline, seguro para SCORM. Degrada a imagen fija si el JS no corre. Es decorativo (respiro visual): un esquema con información NO va aquí.

Evaluación final tipo quiz con resultado y confeti. Va en la última sección, antes del cierre.

Entrega un documento descargable dentro del módulo donde se usa, no en una sección de descargas al final. Lleva cuándo se rellena, qué problema resuelve y una fila de ejemplo ya rellena, que es lo que de verdad enseña a usarlo. Nace de una regla del propio diseño instruccional: el material que llega en un anexo no lo abre nadie.

Relaciona cada concepto con su definición: pulsa uno y luego el otro (o arrastra, o con teclado). Al acertar, la pareja queda marcada en verde con su check; al fallar, aviso en rojo. Columnas barajadas, con progreso y reinicio.

Rellena las palabras clave de un párrafo arrastrando fichas de un banco (con distractores), pulsando ficha→hueco o con teclado. Se pueden sacar fichas para corregir; «Comprobar» valida todos los huecos a la vez con feedback ✓/✗ por hueco. Fija vocabulario y procedimientos.

Coloca 5-6 pasos barajados en su orden correcto, arrastrándolos o con botones Subir/Bajar (operables por teclado, con anuncio de posición a lectores de pantalla). «Comprobar» valida la secuencia con feedback ✓/✗ por ficha. Comprueba que se entiende el proceso, no solo que se reconoce.

Cronología vertical navegable: cada hito (año + título) se expande tipo acordeón para mostrar su detalle. Operable con ratón y teclado (Tab, Enter/Espacio y flechas ↑/↓), ARIA sincronizado, nodos marcados como «vistos» y región de progreso «N de M hitos». Cuando el orden temporal y el detalle por hito importan.

Chasis por defecto de una píldora: navegación lateral por temas con bloqueo progresivo. La base de casi todos los cursos.

Chasis alternativo: paneles a pantalla completa con scroll vertical (abajo = siguiente, arriba = anterior). Reutiliza los mismos componentes.

Navegación tipo tablero: casillas que se desbloquean al completar (scroll + interacción), con test por módulo. Da un aire de juego al curso entero. La plantilla trae 3 lecciones de ejemplo, webgrafía y evaluación; el tablero es dinámico, así que añades o quitas casillas sin tocar el JS.

Quiz gamificado con estética de combate por turnos: puntos de vida, sprites, feedback por pregunta. Se empaqueta como SCORM propio. Ya se usa en el curso de Gamificación.

De dónde salen las imágenes al maquetar. 1556 ilustraciones SVG en el repo (offline, uso comercial sin atribución) que se copian al curso ya recoloreadas al azul IvanLabs, más fotos Creative Commons de Openverse en .webp con su licencia registrada. Se usa desde _scripts/banco_visual.py; el buscador entiende español.

Cada pista es una definición con un hueco: el alumno deduce el término y lo busca en la cuadrícula (5 palabras, solo horizontal o vertical). Al acertar, la palabra se subraya y se revela en verde junto a su definición. Repaso activo de conceptos, no solo de vocabulario.

Quiz de opción única disfrazado de penalti: las 4 opciones son las 4 escuadras de la portería. Apuntas a una zona (la respuesta) y calibras la fuerza con una barra que sube y baja — muy fuerte se va fuera, muy floja no llega (repites); en verde, zona correcta = gol y zona incorrecta = parada del portero. Suma pericia a saber la respuesta. Modo sin puntería para teclado y reduce-motion.